<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <form>
    <select id="province">
      <option value="">请选择省份</option>
      <option value="北京市">北京市</option>
      <option value="广东省">广东省</option>
       <option value=" 河北省"> 河北省</option>
        <option value="山西省">山西省</option>
         <option value="广东省">吉林省</option>
     辽宁省、黑龙江省、陕西省、甘肃省、青海省、山东省、福建省、
      浙江省、台湾地区、河南省、湖北省、湖南省、江西省、
      江苏省、安徽省、海南省、四川省、贵州省、云南省。
      内蒙古自治区、新疆维吾尔自治区、广西壮族自治区、宁夏回族自治区、西藏自治区。
      天津市、上海市、重庆市。
      香港特别行政区、澳门特别行政区。
      <!-- 其他省份选项 -->
    </select>
    <select id="city">
      <option value="">请选择城市</option>
      <!-- 根据省份自动生成城市选项 -->
    </select>
    <select id="district">
      <option value="">请选择区县</option>
      <!-- 根据城市自动生成区县选项 -->
    </select>
    <input type="text" id="address" placeholder="请输入具体地址">
  </form>
<script type="text/javascript">
var dict = { // 存储省份、城市、区县的数据
		  '北京市': ['东城区', '西城区', '朝阳区', '海淀区', '丰台区'],
		  '广东省': ['广州市', '深圳市', '珠海市', '汕头市', '韶关市']
		  // 其他省份、城市选项数据
		};
		var province = document.getElementById('province');
		var city = document.getElementById('city');
		var district = document.getElementById('district');
		var address = document.getElementById('address');

		province.addEventListener('change', function() { // 根据省份自动更新城市选项
		  city.innerHTML = '<option value="">请选择城市</option>';
		  district.innerHTML = '<option value="">请选择区县</option>';
		  var p = this.value;
		  if (p) {
		    var cities = dict[p];
		    cities.forEach(function(c) {
		      var opt = document.createElement('option');
		      opt.value = c;
		      opt.textContent = c;
		      city.appendChild(opt);
		    });
		  }
		});

		city.addEventListener('change', function() { // 根据城市自动更新区县选项
		  district.innerHTML = '<option value="">请选择区县</option>';
		  var c = this.value;
		  if (c) {
		    var districts = dict[c];
		    districts.forEach(function(d) {
		      var opt = document.createElement('option');
		      opt.value = d;
		      opt.textContent = d;
		      district.appendChild(opt);
		    });
		  }
		});

		address.addEventListener('keyup', function() { // 获取并拼接地址信息
		  var p = province.value;
		  var c = city.value;
		  var d = district.value;
		  var a = this.value;
		  var fullAddr = p + c + d + a;
		  console.log(fullAddr); // 输出完整地址信息
		});
</script>
</body>
</html>